<script setup lang="ts">
import { FormInstance, FormRules } from 'element-plus'
import { computed, ref } from 'vue'
import AddParamForm from './AddParamForm.vue'
import ParamTable from './ParamTable.vue'
import SectionTitle from '../SectionTitle.vue'
import { ModalShowType } from '@/types/common'
import { type FormData, type ApiParamBo } from '@/api/api-manage/create'
import useDictStore from '@/store/modules/dict'

const props = defineProps<{
  formData: FormData
}>()

const emit = defineEmits<{
  (e: 'update:formData', type: FormData): void
  (e: 'next'): void
  (e: 'previous'): void
}>()

const formData = computed({
  get() {
    return props.formData
  },
  set(value) {
    emit('update:formData', value)
  },
})
const dictStore = useDictStore()
const { api_request_protocol, api_request_method, api_network_type } = dictStore.getDicts(
  'api_request_protocol',
  'api_request_method',
  'api_network_type'
)

const dialogFormMode = ref(ModalShowType.Hide)
const editRowIndex = ref(-1)

const formRef = ref<FormInstance>()

const rules: FormRules = {
  requestProtocol: [{ required: true, message: '必填' }],
  requestMethod: [{ required: true, message: '必填' }],
  serverNetworkType: [{ required: true, message: '必填' }],
  servicePath: [{ required: true, message: '必填' }],
  requestPath: [{ required: true, message: '必填' }],
  serverProdPath: [{ required: true, message: '必填' }],
  serverUri: [{ required: true, message: '必填' }],
  serverContentType: [{ required: true, message: '必填' }],
  requestTimeOut: [{ required: true, message: '必填' }],
}

function onNext() {
  formRef.value.validate((isValid) => {
    if (!isValid) return

    emit('next')
  })
}

function onDialogFormSubmit(data: ApiParamBo) {
  console.log('🚀 ~ onDialogFormSubmit ~ data:', formData.value)
  if (dialogFormMode.value === ModalShowType.New) {
    formData.value.apiParamList.push(data)
  }
  if (dialogFormMode.value === ModalShowType.Edit) {
    formData.value.apiParamList[editRowIndex.value] = data
  }
  dialogFormMode.value = ModalShowType.Hide
}
</script>

<template>
  <div>
    <el-form ref="formRef" label-width="200px" :model="formData" :rules="rules">
      <section-title title="接口请求定义" />
      <el-form-item label="请求协议" prop="requestProtocol">
        <el-radio-group v-model="formData.requestProtocol" class="ml-4">
          <el-radio v-for="item in api_request_protocol" :key="item.value" :value="item.value">
            {{ (item.label as string).toUpperCase() }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="请求方法" prop="requestMethod">
        <el-select v-model="formData.requestMethod" placeholder="请选择">
          <el-option
            v-for="item in api_request_method"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="网络类型" prop="serverNetworkType">
        <el-radio-group v-model="formData.serverNetworkType" class="ml-4">
          <el-radio
            v-for="item in api_network_type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="请求路径" prop="requestPath">
        <el-input
          v-model="formData.requestPath"
          show-word-limit
          placeholder="请输入请求路径"
          :maxlength="200"
        />
        <span class="text-gray-400">请求参数以[参数名]形式定义，如/path/[name]</span>
      </el-form-item>
      <section-title title="后端服务定义" />
      <el-form-item label="生产环境服务地址" prop="serverProdPath">
        <el-input
          v-model="formData.serverProdPath"
          show-word-limit
          placeholder="请输入生产环境服务地址"
          :maxlength="200"
        />
        <span class="text-gray-400">格式：http(s)://hist:port</span>
      </el-form-item>
      <el-form-item label="测试环境服务地址" prop="serverTestPath">
        <el-input
          v-model="formData.serverTestPath"
          show-word-limit
          placeholder="请输入测试环境服务地址"
          :maxlength="200"
        />
        <span class="text-gray-400">格式：http(s)://hist:port</span>
      </el-form-item>
      <el-form-item label="服务路径" prop="serverUri">
        <el-input
          v-model="formData.serverUri"
          show-word-limit
          placeholder="请输入服务路径"
          :maxlength="200"
        />
        <span class="text-gray-400">请求参数以[参数名]形式定义，如/path/[name]</span>
      </el-form-item>
      <el-form-item label="超时时长(ms)" prop="requestTimeOut">
        <el-input-number v-model="formData.requestTimeOut" :min="1" :max="100000000" />
      </el-form-item>
      <el-form-item label="Content-Type" prop="serverContentType">
        <el-input
          v-model="formData.serverContentType"
          placeholder="请输入Content-Type"
          show-word-limit
          :maxlength="100"
        />
      </el-form-item>
    </el-form>
    <section-title title="后端服务定义" />
    <param-table
      :data="formData.apiParamList"
      @delete="
        (index: number) => {
          formData.apiParamList.splice(index, 1)
        }
      "
      @edit="
        (index: number) => {
          editRowIndex = index
          dialogFormMode = ModalShowType.Edit
        }
      "
    />
    <div class="my-4">
      <el-button class="w-full" @click="dialogFormMode = ModalShowType.New">新增</el-button>
    </div>
    <div>系统参数：<span class="text-gray-400">对用户不可见，由网关传入的特定参数</span></div>
    <div>
      常量参数：<span class="text-gray-400">对用户不可见，但后端始终需要接收的常量参数</span>
    </div>
    <add-param-form
      v-model:modal-show="dialogFormMode"
      :form-data="dialogFormMode == ModalShowType.Edit ? formData.apiParamList[editRowIndex] : null"
      @submit="onDialogFormSubmit"
    />
    <div class="my-4">
      <el-button type="primary" @click="$emit('previous')">上一步</el-button>
      <el-button type="primary" @click="onNext">下一步</el-button>
    </div>
  </div>
</template>
